<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>玉米商业信息管理</title>

    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <link href="../font-awesome/css/font-awesome.css" rel="stylesheet">
    <link href="../css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="../css/animate.css" rel="stylesheet">
    <link href="../css/style.css" rel="stylesheet">
    <!-- orris -->
    <link href="../css/plugins/morris/morris-0.4.3.min.css" rel="stylesheet">
    <link href="../css/plugins/daterangepicker/daterangepicker-bs3.css" rel="stylesheet">
    <link href="../css/plugins/datapicker/datepicker3.css" rel="stylesheet">
    <style>

        #page-wrapper
        {
            margin: 0 0 0 0px;
        }
        h1
        {
            font-size: 60px;
        }
    </style>
</head>

<body>

<div id="wrapper">

    <!-- 左侧导航栏 -->
   <!-- <nav class="navbar-default navbar-static-side" role="navigation">
        <div class="sidebar-collapse">
            <ul class="nav metismenu" id="side-menu">
                &lt;!&ndash; 侧栏头部人物信息 &ndash;&gt;
                <li class="nav-header">
                    <div class="dropdown profile-element"> <span>
                            <img alt="image" class="img-circle" src="../img/profile_small.jpg" />
                             </span>
                        <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                            <span class="clear"> <span class="block m-t-xs"> <strong class="font-bold">当前用户名</strong>
                             </span><span class="text-muted text-xs block">扩展栏 <b class="caret"></b></span> </span> </a>
                        &lt;!&ndash; 人物附加 &ndash;&gt;
                        <ul class="dropdown-menu animated fadeInRight m-t-xs">
                            <li><a href="staff/profile.html">Profile</a></li>
                            <li><a href="staff/staff_list.html">Contacts</a></li>
                            <li><a href="mailbox.html">Mailbox</a></li>
                            <li class="divider"></li>
                            <li><a href="login.html">退出登录</a></li>
                        </ul>
                    </div>
                    <div class="logo-element">
                        IN+
                    </div>
                </li>
                <li>
                    <a href="index.html"><i class="fa fa-user-circle-o" aria-hidden="true"></i> <span class="nav-label">员工管理</span><span
                            class="fa arrow"></span></a>

                    <ul class="nav nav-second-level collapse">
                        <li><a href="staff/staff_list.html">员工列表</a></li>
                        <li><a href="staff/staff_list.html">员工详情</a></li>
                        <li><a href="staff/staff_add.html">添加员工</a></li>
                    </ul>
                </li>
                <li>
                    <a href="layouts.html"><i class="fa fa-ship"></i> <span class="nav-label">商品管理</span></a>
                </li>

                <li style="padding-left: 2px">
                    <a href="#"> <i class="fa fa-user" aria-hidden="true"></i> <span class="nav-label">客户管理</span></a>
                </li>
                <li>
                    <a href="#"><i class="fa fa-shopping-cart" aria-hidden="true"></i> <span class="nav-label">订单管理 </span></a>&lt;!&ndash; 高亮提示 <span class="label label-warning pull-right">16/24</span> &ndash;&gt;</a>
                    <ul class="nav nav-second-level collapse">
                        <li><a href="mailbox.html">已发货</a></li>
                        <li><a href="mail_detail.html">无车</a></li>
                        <li><a href="mail_compose.html">退换货</a></li>
                        &lt;!&ndash;<li><a href="email_template.html">Email templates</a></li>&ndash;&gt;
                    </ul>
                </li>
                <li>
                    <a href="metrics.html"><i class="fa fa-truck" aria-hidden="true"></i> <span class="nav-label">物流信息</span> &lt;!&ndash; 绿色高辆，可用于更新 <span class="label label-primary pull-right">NEW</span> &ndash;&gt; </a>
                </li>
                <li>
                    <a href="widgets.html"><i class="fa fa-stack-exchange" aria-hidden="true"></i> <span class="nav-label">库存信息</span></a>
                </li>
                <li>
                    <a href="#"><i class="fa fa-money" aria-hidden="true"></i> <span class="nav-label">财务信息</span><span class="fa arrow"></span></a>
                    <ul class="nav nav-second-level collapse">
                        <li><a href="income.html">收入</a></li>
                        <li>
                            <a href="pay.html">支出</a>
                        </li>
                        <li><a href="financial_statements.html">盈余报表</a></li>
                    </ul>
                </li>
                <li class="landing_link">
                    <a target="_blank" href="landing.html"><i class="fa fa-star"></i> <span class="nav-label">关于我们</span> &lt;!&ndash; <span class="label label-warning pull-right">NEW</span> &ndash;&gt;</a>
                </li>
            </ul>

        </div>
    </nav>-->


    <div id="page-wrapper" class="gray-bg dashbard-1">
        <!-- 头部导航 -->
        <!--<div class="row border-bottom">
            <nav class="navbar navbar-static-top" role="navigation" style="margin-bottom: 0">
                <div class="navbar-header">
                    <a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#"><i
                            class="fa fa-bars"></i> </a>
                    <form role="search" class="navbar-form-custom" action="search_results.html">
                        <div class="form-group">
                            <input type="text" placeholder="搜一些什么呢(๑•̀ㅂ•́)و✧" class="form-control"
                                   name="top-search" id="top-search">
                        </div>
                    </form>
                </div>
                <ul class="nav navbar-top-links navbar-right">
                    <li>
                        <span class="m-r-sm text-muted welcome-message">欢迎使用玉米商业信息管理系统</span>
                    </li>
                    <li>
                        <a href="#">
                            <i class="fa fa-sign-out"></i>退出登录
                        </a>
                    </li>
                </ul>

            </nav>
        </div>-->
        <div class="row wrapper border-bottom white-bg page-heading">
            <div class="col-lg-10">
                <h2>财务报表</h2>
                <ol class="breadcrumb">
                    <li>
                        <a href="index.html">首页</a>
                    </li>
                    <li>
                        <a>财务管理</a>
                    </li>
                    <li class="active">
                        <strong>财务报表</strong>
                    </li>
                </ol>
            </div>
        </div>
        <!-- 头部导航结束 -->

        <!-- 本月明细开始 -->
        <div class="row">
            <div class="col-lg-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-success pull-right">五月</span>
                        <h5>总支出</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins">40 886,200</h1>
                        <div class="stat-percent font-bold text-success">98% <i class="fa fa-bolt"></i></div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-info pull-right">五月</span>
                        <h5>总收入</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins">275,800</h1>
                        <div class="stat-percent font-bold text-info">20% <i class="fa fa-level-up"></i></div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-primary pull-right">五月</span>
                        <h5>净利润</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins">106,120</h1>
                        <div class="stat-percent font-bold text-navy">44% <i class="fa fa-level-up"></i></div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-danger pull-right">五月</span>
                        <h5>净利率</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins">80,600</h1>
                        <div class="stat-percent font-bold text-danger">38% <i class="fa fa-level-down"></i></div>
                    </div>
                </div>
            </div>
        </div>
       <!-- 本月明细结束 -->

        <!-- 年度折线图分析 -->

        <div class="row">
            <div class="col-lg-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>年度折线图分析 </h5>
                        <div class="flot-chart dashboard-chart">
                            <div class="flot-chart-content" id="flot-dashboard-chart"></div>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div id="morris-one-line-chart"></div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 年度折线图分析结束 -->

        <!-- 总收入分析 -->
        <div class="row">
            <div class="col-lg-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>收入分析 <small>2017</small></h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a href="#">1</a>
                                </li>
                                <li><a href="#">2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <table class="footable table table-stripped" data-page-size="8" data-filter=#filter>
                            <thead>
                            <tr>
                                <th>月份</th>
                                <th>订单货款</th>
                                <th data-hide="phone,tablet">实收款</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr class="gradeX">
                                <td>Trident</td>
                                <td>Internet
                                    Explorer 4.0
                                </td>
                                <td>Win 95+</td>
                            </tr>
                            <tr class="gradeC">
                                <td>Trident</td>
                                <td>Internet
                                    Explorer 5.0
                                </td>
                                <td>Win 95+</td>
                            </tr>
                            <tr class="gradeA">
                                <td>Trident</td>
                                <td>Internet
                                    Explorer 5.5
                                </td>
                                <td>Win 95+</td>
                            </tr>
                            <tr class="gradeA">
                                <td>Gecko</td>
                                <td>Netscape Navigator 9</td>
                                <td>Win 98+ / OSX.2+</td>
                            </tr>

                            <tr class="gradeA">
                                <td>Webkit</td>
                                <td>Safari 1.3</td>
                                <td>OSX.3</td>
                            </tr>
                            </tbody>
                            <tfoot>
                            <tr>
                                <td colspan="5">
                                    <ul class="pagination pull-right"></ul>
                                </td>
                            </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>

            <div class="col-lg-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>年度收入走势 <small>2017</small></h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a href="#">Config option 1</a>
                                </li>
                                <li><a href="#">Config option 2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="flot-chart">
                            <div class="flot-chart-content" id="flot-line-chart"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 总支出分析 -->
        <div class="row">
            <div class="col-lg-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>支出分析 <small>2017</small></h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a href="#">1</a>
                                </li>
                                <li><a href="#">2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <table class="footable table table-stripped" data-page-size="8" data-filter=#filter>
                            <thead>
                            <tr>
                                <th>月份</th>
                                <th>订单货款</th>
                                <th data-hide="phone,tablet">支出款</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr class="gradeX">
                                <td>Trident</td>
                                <td>Internet
                                    Explorer 4.0
                                </td>
                                <td>Win 95+</td>
                            </tr>
                            <tr class="gradeC">
                                <td>Trident</td>
                                <td>Internet
                                    Explorer 5.0
                                </td>
                                <td>Win 95+</td>
                            </tr>
                            <tr class="gradeA">
                                <td>Trident</td>
                                <td>Internet
                                    Explorer 5.5
                                </td>
                                <td>Win 95+</td>
                            </tr>
                            <tr class="gradeA">
                                <td>Gecko</td>
                                <td>Netscape Navigator 9</td>
                                <td>Win 98+ / OSX.2+</td>
                            </tr>

                            <tr class="gradeA">
                                <td>Webkit</td>
                                <td>Safari 1.3</td>
                                <td>OSX.3</td>
                            </tr>
                            </tbody>
                            <tfoot>
                            <tr>
                                <td colspan="5">
                                    <ul class="pagination pull-right"></ul>
                                </td>
                            </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>

            <div class="col-lg-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>年度支出走势 <small>2017</small></h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a href="#">Config option 1</a>
                                </li>
                                <li><a href="#">Config option 2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">

                        <div class="flot-chart">
                            <div class="flot-chart-content" id="flot-line-chart"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>



    </div>
</div>



<script src="../js/jquery-2.1.1.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="../js/plugins/slimscroll/jquery.slimscroll.min.js"></script>

<!-- 折线图插件 -->
<script src="../js/plugins/flot/jquery.flot.js"></script>
<script src="../js/plugins/flot/jquery.flot.spline.js"></script>

<!-- Peity -->
<script src="../js/plugins/peity/jquery.peity.min.js"></script>

<!-- Morris -->
<script src="../js/plugins/morris/raphael-2.1.0.min.js"></script>
<script src="../js/plugins/morris/morris.js"></script>

<!-- Custom and plugin javascript -->
<script src="../js/inspinia.js"></script>
<script src="../js/plugins/pace/pace.min.js"></script>

<!-- iCheck -->
<script src="../js/plugins/iCheck/icheck.min.js"></script>

<!-- Peity -->
<script src="../js/demo/peity-demo.js"></script>

<!-- Date range use moment.js same as full calendar plugin -->
<script src="../js/plugins/fullcalendar/moment.min.js"></script>

<!-- Date range picker -->
<script src="../js/plugins/daterangepicker/daterangepicker.js"></script>

<script>

    //折线图数据部分
    var data1 = [
        [1,8],[2,5],[3,10],[4,4],[5,16],[6,5],[7,11],[8,6],[9,11],[10,30],[11,10],[12,13]
    ];
    var data2 = [
        [1,0],[2,2],[3,0],[4,1],[5,3],[6,1],[7,5],[8,2],[9,3],[10,2],[11,1],[12,0]
    ];
    var data3 = [
        [1,8],[2,8],[3,9],[4,0],[5,43],[6,1],[7,5],[8,2],[9,3],[10,2],[11,2],[12,0]
    ];
    //折线图配置
    $("#flot-dashboard-chart").length && $.plot($("#flot-dashboard-chart"), [
                {data:data1,label:"aaa"},
                {data:data2,label:"bbb"},
                {data:data3,label:"ccc"}
            ],
            {
                series: {
                    lines: {
                        show: false,
//                                fill: true,
                        stack:true,
                        bars:{
                            show:true
                        }
                    },
                    splines: {
                        show: true,
                        tension: 0.4,
                        lineWidth: 1,
                        fill: 0.4
                    },
                    points: {
                        radius: 0,
                        show: true
                    },
                    shadowSize: 2
                },
                label:["aaa","bbb","ccc"],
                grid: {
                    hoverable: true,
                    clickable: true,
                    tickColor: "#d5d5d5",
                    borderWidth: 1,
                    color: '#d5d5d5'
                },
                //更改颜色
                colors: ["#1ab394", "#464f88"],
//                        colors:["red","yellow","block"],
                xaxis:{
                },

                yaxis: {
                },
                tooltip: true
            }
    );

    var doughnutData = [
        {
            value: 300,
            color: "#a3e1d4",
            highlight: "#1ab394",
            label: "App"
        },
        {
            value: 50,
            color: "#dedede",
            highlight: "#1ab394",
            label: "Software"
        },
        {
            value: 100,
            color: "#b5b8cf",
            highlight: "#1ab394",
            label: "Laptop"
        }
    ];

    var doughnutOptions = {
        segmentShowStroke: true,
        segmentStrokeColor: "#fff",
        segmentStrokeWidth: 2,
        percentageInnerCutout: 45, // This is 0 for Pie charts
        animationSteps: 100,
        animationEasing: "easeOutBounce",
        animateRotate: true,
        animateScale: false
    };

</script>

</body>

</html>